<!DOCTYPE html>
<!--

    JBoss, Home of Professional Open Source
    Copyright 2012, Red Hat, Inc., and individual contributors
    by the @authors tag. See the copyright.txt in the distribution for a
    full listing of individual contributors.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<html>
<head>
    <title>AeroGear QuickStart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- Set the tab, home page, shortcut icons -->
    <link rel="Shortcut Icon" href="img/aerogear_icon_16x.png">
    <link rel="apple-touch-icon" href="img/aerogear_avatar_48px.png"/>

    <!-- For minification, comment out this link -->
    <!-- Shared styles -->
    <link rel="stylesheet" href="css/screen.css"/>

    <!-- Set viewport scaling and zoom features -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="js/libs/modernizr-2.5.3.min.js"></script>
    <script type="text/javascript" src="js/libs/underscore-min.js"></script>

    <!-- Minification - See Readme for details -->
    <!-- For minification, comment out this file -->
    <script type="text/javascript" src="js/app.js"></script>
    <!-- For minification, uncomment this file -->
    <!-- <script type="text/javascript" src="js/app.min.js"></script> -->

    <script type="text/javascript">
        yepnope([{
            //Load CDN hosted jQuery or fall back to local file.
            /*--------Note-----------
            This approach should only be used if you trust the source of where the resource (JavaScript) is located.
            In this case, use of the jquery CDN is much faster if your user's browser already has this file cached.
            If they don't have it cached, try to load it from the CDN as this will be faster if the user is
            located closer to a CDN than you currently hosted server.
            */
            load: "http://code.jquery.com/jquery-1.7.1.min.js",
            complete: function() {
                if ( !window.jQuery ) {
                    //In production, you would want to fall back to a minified file.
                    //We fall back to the full version because Eclipse reports false errors in some minified JavaScript files.
                    yepnope.load( "js/libs/jquery-1.7.1.js" );
                }
            }
        },{
            //device detection and asynchronous script loading
            /*--------Note-----------
            Here we're using the yepnope framework which gives us the ability to load scripts dynamically, based on
            Modernizr's results.
            With Modernizr, we use media queries and touch detection to see if we are on a mobile, touch based device
            or if we're at anything less than 480px.. this gives us a mobile ui on desktop browsers when resized to <480px
            width for testing.
            */
            test: Modernizr.mq( "only all and (max-width: 640px)" ),
            yep: {
                //assign labeled callbacks for later execution after script loads.
                //we are on mobile device so load appropriate CSS
                "jqmcss": "css/jquery.mobile-1.1.0.min.css",
                // For minification, uncomment this line
                //"mcss": "css/m.screen.min.css"
                // For minification, comment out this line
                "mcss": "css/m.screen.css"
            },
            nope: {
                //we are on desktop
                // For minification, uncomment this line
                //"scss": "css/d.screen.min.css"
                // For minification, comment out this line
            	"scss": "css/d.screen.css"
            },
            callback: {
                //use the labeled callbacks from above, and load jQuery Mobile
                "jqmcss": function( url, result, key ) {
                    yepnope({
                        load: "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js",
                        complete: function() {
                            if ( !$.mobile ) {
                                yepnope( "js/libs/jquery.mobile-1.1.0.min.js" );
                            }
                        }
                    });
                },
                "scss": function( url, result, key ) {
                    $( document ).ready( function() {
                        //here we are moving content around based on the browser/device.
                        $( "aside" ).insertAfter( $( "section" ) );
                    });
                }
            },
            complete: function() {
                $( document ).ready( function() {
                    //setup the app after all scripts have loaded

                    $( "#container" ).show();
                    //Fetches the initial member data and populates the table using jquery templates
                    getMemberTemplate();

                    //Register an event listener on the sumbit action
                    $('#reg').submit(function(event) {
                        event.preventDefault();

                        var memberData = $(this).serializeObject();
                        //Workaround for jQM adding a hidden field for submit buttons which then
                        //gets serialized into the form values
                        if ( memberData.register ) {
                            delete memberData.register;
                        }
                        registerMember(memberData);
                    });

                    //Register the cancel listener
                    $('#cancel').click(function(event) {
                        //clear input fields
                        $('#reg')[0].reset();

                        //clear existing msgs
                        $('span.invalid').remove();
                        $('span.success').remove();
                    });

                    $("#refreshButtonD, #refreshButtonM").click(function(event) {
                        updateMemberTable();
                    });

                    //Clear member registration and error messages on page change
                    $("#container").delegate("#register-art", "pagebeforeshow", function(event) {
                        $("#formMsgs").empty();
                        $('span.invalid').remove();
                    });
                });

                $.fn.serializeObject = function() {
                    var o = {};
                    var a = this.serializeArray();
                    $.each(a, function() {
                        if (o[this.name]) {
                            if (!o[this.name].push) {
                                o[this.name] = [o[this.name]];
                            }
                            o[this.name].push(this.value || '');
                        } else {
                            o[this.name] = this.value || '';
                        }
                    });
                    return o;
                };
            }
        }]);
    </script>
</head>
<body>
    <div id="container" style="display:none">
        <div class="logo">
            <img src="img/aerogear_logo_150px.png"/>
        </div>
        <div class="dualbrand">
            <img src="img/dualbrand_logo.png"/>
        </div>
        <section>
            <h1>Welcome to JBoss &amp; AeroGear!</h1>
            <article id="intro-art" data-role="page" data-theme="a">
                <!-- Header -->
                <div data-role="header" class="header">
                    <img class="header_logo" src="img/icon_medium.png"/>
                    <h3>AeroGear Quickstart</h3>
                    <a href="#info-aside" data-role="button" data-icon="info" class="ui-btn-right" data-iconpos="notext" data-rel="dialog"></a>
                </div>
                <!-- /Header -->

                <div data-role="content">
                    <img src="img/aerogear_icon_64px.png" class="mobileicon"/>
                    <p>You have successfully deployed a Java EE 6 web application.</p>
                    <h3>Your application can run on:</h3>
                    <img src="img/dualbrand_as7eap.png" class="max-width-100"/>
                    <p>This quickstart demonstrates the use of various Mobile, HTML5, CSS3 and JavaScript techniques.</p>
                    <div class="highlights">
                        <ul>
                            <li>HTML5 Client using JAX-RS REST end points</li>
                            <li>HTML5 &amp; JAX-RS validation</li>
                        </ul>
                    </div>
                    <div class="highlights">
                        <ul>
                            <li>jQuery Mobile Integration</li>
                            <li>QUnit testing for JavaScript validation</li>
                        </ul>
                    </div>

                    <ul id="features">
                        <li class="feature">Pure HTML client</li>
                        <li class="feature">JAX-RS GET &amp; POST end points</li>
                        <li class="feature">HTML5 based page structure</li>
                        <li class="feature">HTML5 form element &amp; validation</li>
                        <li class="feature">CSS3 selectors used for styling</li>
                        <li class="feature">JAX-RS validation handling</li>
                        <li class="feature">jQuery Mobile integration</li>
                        <li class="feature">QUnit test suite to validate JavaScript</li>
                    </ul>
                </div>

                <!-- Footer -->
                <div class="footer" data-role="footer" data-position="fixed">
                    <div class="footer_left">
                        <a href="#intro-art" data-role="button" data-icon="home">Home</a>
                    </div>
                    <div class="footer_right">
                        <span class="footer_txt">Member:</span>
                        <a href="#register-art" data-role="button" data-icon="plus">Add</a>
                        <a href="#member-art" data-role="button" data-icon="grid">List</a>
                    </div>
                </div>
                <!-- /Footer -->
            </article>

            <!-- New HTML5 article tag -->
            <article id="register-art" data-role="page" data-theme="a">
                <!-- Header -->
                <div data-role="header" class="header">
                    <img class="header_logo" src="img/icon_medium.png"/>
                    <h3>AeroGear Quickstart</h3>
                    <a href="#info-aside" data-role="button" data-icon="info" class="ui-btn-right" data-iconpos="notext" data-rel="dialog"></a>
                </div>
                <!-- /Header -->

                <div data-role="content">

                    <!-- For now mapping bean validation constraints from server side model is a manual task -->
                    <form name="reg" id="reg" data-ajax="false">
                        <fieldset>
                            <legend>Register a member:</legend>
                            <div>
                                <label for="name">Name:</label>
                                <input type="text" name="name" id="name" placeholder="Your Name" required autofocus/>
                            </div>
                            <div>
                                <label for="email">Email:</label>
                                <input type="email" name="email" id="email" placeholder="Your Email" required/>
                            </div>
                            <div>
                                <label for="phoneNumber">Phone #:</label>
                                <input type="tel" name="phoneNumber" id="phoneNumber" pattern="[0-9]{10,12}" placeholder="Your Phone #" required/>
                            </div>
                            <div id="formMsgs"></div>
                            <div data-role="controlgroup" data-type="horizontal">
                                <input type="submit" name="register" id="register" value="Register"/>
                                <input type="button" name="cancel" id="cancel" value="Cancel"/>
                            </div>
                        </fieldset>
                    </form>
                </div>

                <!-- Footer -->
                <div class="footer" data-role="footer" data-position="fixed">
                    <div class="footer_left">
                        <a href="#intro-art" data-role="button" data-icon="home">Home</a>
                    </div>
                    <div class="footer_right">
                        <span class="footer_txt">Member:</span>
                        <a href="#register-art" data-role="button" data-icon="plus">Add</a>
                        <a href="#member-art" data-role="button" data-icon="grid">List</a>
                    </div>
                </div>
                <!-- /Footer -->
            </article>

            <!-- New HTML5 article tag -->
            <article id="member-art" data-role="page" data-theme="a">
                <!-- Header -->
                <div data-role="header" class="header" data-position="fixed">
                    <img class="header_logo" src="img/icon_medium.png"/>
                    <h3>AeroGear Quickstart</h3>
                    <a href="#info-aside" data-role="button" data-icon="info" class="ui-btn-right" data-iconpos="notext" data-rel="dialog"></a>
                </div>
                <!-- /Header -->
                <h2>Current Members</h2>

                <div data-role="content">
                    <button id="refreshButtonM" data-role="button" data-inline="true" data-icon="refresh">Refresh Members</button>
                    <div id="members"></div>
                    <div class="member-foot">
                        <!-- Sets the JAX-RS URLs to retrieve all members either as XML or JSON data.-->
                        REST URL for all members: 
                        <a href="rest/members" target="_blank" rel="external">JSON</a>
                        <button id="refreshButtonD">Refresh Members</button>
                    </div>
                </div>

                <!-- Footer -->
                <div class="footer" data-role="footer" data-position="fixed">
                    <div class="footer_left">
                        <a href="#intro-art" data-role="button" data-icon="home">Home</a>
                    </div>
                    <div class="footer_right">
                        <span class="footer_txt">Member:</span>
                        <a href="#register-art" data-role="button" data-icon="plus">Add</a>
                        <a href="#member-art" data-role="button" data-icon="grid">List</a>
                    </div>
                </div>
                <!-- /Footer -->
            </article>

            <!-- New HTML5 aside tag -->
            <aside id="info-aside" data-role="page" data-theme="a">
                <!-- Header -->
                <div data-role="header">
                    <h3>Find out more</h3>
                </div>
                <!-- /Header -->

                <div data-role="content">
                    <p>Learn more about JBoss Enterprise Application Platform 6.</p>
                    <ul>
                        <li><a href="http://red.ht/jbeap-6-docs" target="_blank">Documentation</a></li>
                        <li><a href="http://red.ht/jbeap-6" target="_blank">Product Information</a></li>
                    </ul>
                    <p>Learn more about JBoss AS 7.</p>
                    <ul>
                        <li><a href="https://docs.jboss.org/author/display/AS7/Getting+Started+Developing+Applications+Guide" target="_blank">Getting Started Developing Applications Guide</a></li>
                        <li><a href="http://jboss.org/jbossas" target="_blank">Community Project Information</a></li>
                    </ul>
                    <p>Learn about <strong>AeroGear</strong> and HTML5/Mobile development on JBoss.</p>
                    <ul>
                        <li><a href="http://jboss.org/aerogear" target="_blank">AeroGear Project site</a></li>
                        <li><a href="https://community.jboss.org/wiki/HTML5RESTApplications" target="_blank">More on <strong>HTML5 + REST</strong></a></li>
                        <li><a href="https://community.jboss.org/wiki/GetStartedWithHTML5MobileWebDevelopmentWithJBoss" target="_blank">Get this application</a></li>
                        <li><a href="https://community.jboss.org/wiki/HTML5MobileQuickstartArchetypeDeepDive" target="_blank">Application deepdive</a></li>
                        <li><a href="https://community.jboss.org/community/aerogear" target="_blank">AeroGear user forums</a></li>
                        <li><a href="https://github.com/organizations/aerogear" target="_blank">Github</a></li>
                    </ul>
                </div>
            </aside>
        </section>

        <!-- New HTML5 footer tag -->
        <footer>
            <!--<img src="img/logo.png" alt="HTML5"/>-->
            <p>This project was generated from a Maven archetype from JBoss.<br/></p>
        </footer>
    </div>
</body>
</html>
